<template>
  <el-dialog v-model="visible" title="创建生产计划" width="1000px">
    <div class="create-plan-dialog">
      <!-- 订单信息 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">生产订单号：{{ orderDetail.ProductionOrderCode || '-' }}</el-col>
          <el-col :span="12">客户名称：{{ orderDetail.DCustomerId === 2 ? '客户二' : '客户一' || '-' }}</el-col>
          <el-col :span="12">订单编号：{{ orderDetail.OrderCode || '-' }}</el-col>
          <el-col :span="12">订单来源：{{ orderDetail.OrderSource || '-' }}</el-col>
          <el-col :span="12">交付日期：{{ orderDetail.DeliveryDate || '2025-5-10' }}</el-col>
          <el-col :span="12">备注：{{ orderDetail.Remarks || '-' }}</el-col>
          <el-col :span="12">创建时间：{{ orderDetail.CreateDate || '-' }}</el-col>
          <el-col :span="12">创建人：{{ orderDetail.CreateUserName || '-' }}</el-col>
          <!-- 截图上还有"最后更新时间"和"最后更新人"，这里假设detail中包含这些字段 -->
          <el-col :span="12">最后更新时间：{{ orderDetail.LastUpdateTime || '-' }}</el-col>
          <el-col :span="12">最后更新人：{{ orderDetail.LastUpdater || '-' }}</el-col>
        </el-row>
      </el-card>

      <!-- 成品信息 -->
      <el-card class="box-card" style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <span>成品信息</span>
          </div>
        </template>
        <el-table :data="localProductList" style="width: 100%;">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="rawmanagementId" label="原料编号" width="100"/>
          <el-table-column prop="rawmanagementBh" label="原料名称" width="120"/>
          <el-table-column prop="productCode" label="成品编号" width="120"/>
          <el-table-column prop="productName" label="成品名称" width="120"/>
          <el-table-column prop="productType" label="规格型号" width="120"/>
          <el-table-column prop="sizeName" label="尺寸" width="100"/>
          <el-table-column prop="danWeiName" label="单位" width="80"/>
          <!-- <el-table-column prop="DemandQuantity" label="需求数量" width="100"/> -->
          <el-table-column prop="CurrentPlanNum" label="本次计划产量" width="150">
            <template #default="scope">
              <el-input-number 
                v-model="scope.row.CurrentPlanNum"
                :min="1"
                controls-position="right"
                size="small"
              />
            </template>
          </el-table-column>
  <!-- 添加计划开始日期列 -->
        <el-table-column prop="PlanningStartDate" label="计划开始日期" width="230">
          <template #default="scope">

            <el-date-picker
                v-model="scope.row.plannedStartDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
                 value-format="YYYY-MM-DD"
              />

          </template>
        </el-table-column>

        <!-- 添加计划结束日期列 -->
        <el-table-column prop="PlanningEndDate" label="计划结束日期" width="230">
          <template #default="scope">
             <el-date-picker
                   v-model="scope.row.plannedEndDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
                 value-format="YYYY-MM-DD"
              />
          </template>
        </el-table-column>
          <!-- <el-table-column prop="CarNo" label="车间" width="100"/> -->
          <el-table-column prop="processRouteId"  width="150" label="工艺路线">
              <template #default="scope">
                  <el-select 
                    v-model="scope.row.processRouteId" 
                    placeholder="请选择工艺路线"
                    @change="(value) => handleProcessRouteChange(value, scope.row)"
                  >
                      <el-option
                          v-for="item in processRouteOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="generatePlan">生成计划</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue';
// 引入 Element Plus 的输入框组件，如果需要
import { ElInputNumber, ElMessage } from 'element-plus';
import http from '@/api/http';
import { onMounted } from 'vue';
 const processRouteOptions = ref([]); // 声明用于存储工艺路线选项的响应式变量
    const dictionaryItems = ref([]);
// 组件挂载后自动加载字典数据
onMounted(async () => {
    try {
        const response =await  http.post('/api/Sys_Dictionary/GetVueDictionary', ['Processmanagement'], {
            headers: {
                'Content-Type': 'application/json'
            }
        });
    
 // 检查返回的数据结构是否符合预期：[[{ "dicNo": "...", "data": [...] }]]
        // 确保 response 存在，是数组，非空，第一个元素存在，第一个元素有 data 属性，且 data 属性是数组
        if (response && Array.isArray(response) && response.length > 0 && response[0] && response[0].data && Array.isArray(response[0].data)) {
            // 如果数据结构符合预期，则取出 data 数组
            dictionaryItems.value = response[0].data;
            console.log('成功取出字典的 data 数组:', dictionaryItems.value);

            // ** 对取出的 dictionaryItems 数组进行格式转换 **
            processRouteOptions.value = dictionaryItems.value.map(item => ({
                value: item.key,   // 后端返回的 key 作为选项的值
                label: item.value // 后端返回的 value 作为选项显示的文本
            }));
            console.log('转换后的工艺路线选项数据:', processRouteOptions.value);

        }
        // ** 如果上面的 if 条件不满足，说明返回的数据结构不符合预期或者API调用有问题 **
        else {
            console.error('加载工艺路线字典失败：返回数据结构不正确或为空。', '收到的响应:', response);
            processRouteOptions.value = []; // 加载失败或数据结构不正确时清空选项
        }

    } catch (error) {
        // API请求过程中发生错误
        console.error('在 CreateProductionPlanDialog 中调用字典接口出错:', error);
        processRouteOptions.value = []; // 错误发生时清空选项
    }
});


const props = defineProps({
  visible: Boolean,
  orderDetail: Object, // 接收订单信息
  productList: Array, // 接收成品信息列表
  processRouteOptions: Array // 接收工艺路线选项列表
});

const emit = defineEmits(['update:visible', 'generate-plan']);




// 使用内部 visible 状态来控制 el-dialog
const visible = ref(props.visible);

// 使用本地 reactive 数据存储产品列表，以便编辑
const localProductList = ref([]);

// 当 productList prop 变化时，更新本地数据
watchEffect(() => {
  if (props.productList) {
    // 深拷贝productList，确保修改本地数据不影响父组件的prop
    localProductList.value = props.productList.map(item => ({ ...item }));
  } else {
    localProductList.value = [];
  }
});

// 同步外部 visible prop 的变化到内部状态
watch(() => props.visible, (newValue) => {
  visible.value = newValue;
});

// 同步内部 visible 状态的变化到外部 (实现 v-model)
watch(visible, (newValue) => {
  emit('update:visible', newValue);
});

function close() {
  visible.value = false;
}

const handleProcessRouteChange = (value, row) => {
  console.log('选中的工艺路线值:', value);
  console.log('当前行数据:', row);
  // 更新当前行的工艺路线值
  row.processRouteId = value;
};

async function generatePlan() {
  console.log('生成计划按钮点击');

  // 1. 数据验证
  for (const product of localProductList.value) {
    if (!product.CurrentPlanNum || product.CurrentPlanNum <= 0) {
      ElMessage.warning(`成品 ${product.ProductName || product.ProductCode} 的计划产量无效，请输入大于0的数值。`);
      return;
    }
    if (!product.processRouteId) {
      ElMessage.warning(`成品 ${product.ProductName || product.ProductCode} 的工艺路线未选择，请选择工艺路线。`);
      return;
    }
  }

  // 2. 构建发送给后端的数据结构
  const planData = {
    "mainData": {
      ProductionPlanningId: "",
      ProductionPlanningCode: "",
      // PlanningStartDate: localProductList.value.length > 0 && localProductList.value[0].plannedStartDate ? localProductList.value[0].plannedStartDate : "",
      // PlanningEndDate: localProductList.value.length > 0 && localProductList.value[0].plannedEndDate ? localProductList.value[0].plannedEndDate : "",
      ProductionOrderId: props.orderDetail.ProductionOrderId,
      Creator: props.orderDetail.CreateUserName,
      // ProcessmanagementId: localProductList.value.length > 0 && localProductList.value[0].processRouteId ? localProductList.value[0].processRouteId : "",
    },
    "detailData": localProductList.value.map(item => ({
      ProductId: item.productId,
      CurrentPlanNum: item.CurrentPlanNum,
      processRouteId: item.processRouteId,
      plannedStartDate: item.plannedStartDate,
      plannedEndDate: item.plannedEndDate,
    })),
  }
  
  console.log('提交的计划数据:', planData);
  // 3. 调用后端API创建生产计划
  // TODO: 请根据实际后端接口调整URL和请求方法
  const createPlanApiUrl = 'http://localhost:9991/api/ProductionPlanning/Add'; // 假设的API地址
  try {
    // 假设后端接口是POST请求，并且请求体是planData对象
    const response = await http.post(createPlanApiUrl, planData, '正在生成生产计划...');

    // 4. 处理后端响应
    if (response.status) {
      ElMessage.success('生产计划生成成功！');
      close(); // 关闭弹框
      // TODO: 如果需要在生产订单列表刷新数据，可以在这里emit一个事件
      // emit('plan-created');
    } else {
      // 失败则显示错误信息
      ElMessage.error('生成生产计划失败：' + response.message || '未知错误');
    }
  } catch (error) {
    console.error('调用生成生产计划API出错:', error);
    ElMessage.error('调用生成生产计划接口出错，请稍后重试。');
  }


}

</script>

<style scoped>
.create-plan-dialog {
  padding: 10px;
}
.box-card span {
    font-weight: bold;
}
.el-col {
  margin-bottom: 10px;
}
</style> 